<template>
	<div class="login_container">
		<!-- 登录盒子-->
		<div class="login_box1">
			<!-- 头像盒子-->
			<div class="img_box">
				<img src="../assets/log.jpg">
			</div>
			<div style="margin-top: 100px;height: 450px; padding-right: 30px;">
				<!-- 登录表单-->
				<el-form ref="form" :model="ruleForm" label-width="80px">
					<el-form-item label="账号">
						<el-input v-model="ruleForm.account" value="admin"></el-input>
					</el-form-item>
					<el-form-item label="密码">
						<el-input type="password" v-model="ruleForm.password" value="111111"></el-input>
					</el-form-item>
					<el-form-item label="角色" >
						<el-select v-model="ruleForm.role" placeholder="请选择登录角色" style="width: 100%;">
							<el-option label="用户" value="1"></el-option>
							<el-option label="管理员" value="2"></el-option>
						</el-select>
					</el-form-item>
					<el-button type="text" @click="regtime()"
						style="padding:0 0 0 100px; float: left; font-family: 'PingFang SC'; color: #90C438;height: 26px;">
						立即注册
					</el-button>
					<el-button type="text" style="float: right; color: #90C438;height: 26px;">忘记密码?</el-button>
					<div style="clear: left;"></div>
					<div style="clear: right;"></div>
					<el-form-item style="margin-left: 70px;">
						<el-button type="success" @click="login()">登录</el-button>
						<el-button type="success" plain>取消</el-button>
						<!-- <el-button >取消</el-button> -->
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name:'Login',
		data: function() {
				var validatePass = (rule, value, callback) => {
					if (value === '') {
						callback(new Error('请输入密码'));
					} else {
						callback();
					}
				};
				return {
					ruleForm: {
						account: "",
						password: "",
					},
					rules: {
						password: [{
							validator: validatePass,
							trigger: 'blur'
						}],
					}
				}
		},
	    methods:{
			regtime(){
			  	this.$router.push("/regtime");
			},
		  	login(){
		  		console.log(this.ruleForm.role);
		  		if(this.ruleForm.role==1){
		  			this.$http.post("user/login", this.ruleForm).then((resp)=>{
		  				console.log(resp);
		  				if (resp.data.code == 201) {
		  					this.$message({
		  						message: resp.data.msg,
		  						type: "warning"
		  					});
		  					return;
		  				} else if (resp.data.code == 200) {
		  					//路由跳转
		  					window.sessionStorage.setItem("flag", 1);
		  					window.sessionStorage.setItem("useraccount", resp.data.data.account);
		  					window.sessionStorage.setItem("userid", resp.data.data.id);
		  					window.sessionStorage.setItem("usertoken", resp.data.data.usertoken);
		  					this.dialogVisible = false;
		  				}
		  				this.$router.push("/home");
		  			})
		  		}else if(this.ruleForm.role==2){
					this.$http.post("admin/loginCtl/login",this.ruleForm).then((resp)=>{
						if(resp.data.code == 200){
							window.sessionStorage.setItem("token",resp.data.data.token);
							window.sessionStorage.setItem("account",resp.data.data.account);
							
							console.log(resp.data);
							// _this.$router.push("/main");
							this.$router.push("/main");
							this.$message({
								message: resp.data.message,
								type:'success'
							});
						}else if(resp.data.code == 201){
							this.$message({
								message: resp.data.message,
								type:'warning'
							})
						}				
						
					})
		  		}
		  	},
	    }
	}
</script>

<style>
 	.login_container {
 		width: 100%;
 		height: 708px;
 		margin: auto;
 		padding: 0px;
 		background-image: url(../assets/back2.jpg);
 		background-position: center;
 	}
 
 	.login_box1 {
 		width: 450px;
 		height: 450px;
 		background-color: #fff;
 		border-radius: 10px;
 		position: absolute;
 		left: 50%;
 		top: 50%;
 		transform: translate(-50%, -50%);
 	}
 
 	.img_box {
 		width: 118px;
 		height: 118px;
 		position: absolute;
 		left: 50%;
 		transform: translate(-50%, -50%);
 		background-color: #fff;
 		padding: 5px;
 		border-radius: 10px;
 		background-color: transparent;
 	}
 
 	.img_box img {
 		width: 100%;
 		height: 100%;
 	}
</style>
